import { Button } from 'antd';
import { debounce } from 'lodash';
import React, { Component } from 'react';
import { DetailModal } from './component/DetailModal';
import './../style.scss';
import { SmsChannelInfo } from 'admin/schema/CorporateSet';
import { querySmsChannelDetail } from 'admin/servers/servers';

interface Props {}
interface State {
  /**当前编辑数据 */
  currentDetail: SmsChannelInfo;
  /**弹窗显示隐藏 */
  visibleDetail: boolean;
}

/**企业设置-短信通道设置 */
export default class SmsChannel extends Component<Props, State> {
  state = {
    currentDetail: {} as SmsChannelInfo,
    visibleDetail: false,
  };

  componentDidMount() {
    this.fetchData();
  }

  componentWillUnmount() {
    this.setState = () => {
      return;
    };
  }

  /**查询数据 */
  fetchData = async () => {
    try {
      const { data = {} as SmsChannelInfo } = await querySmsChannelDetail();
      this.setState({
        currentDetail: data || ({} as any),
      });
    } catch (error) {
      console.error(`系统异常: ${JSON.stringify(error)}`);
    }
  };

  /**打开弹窗 */
  openDetail = debounce(() => {
    this.setState({ visibleDetail: true });
  }, 500);

  /**关闭弹窗 */
  closeDetail = () => {
    this.setState({ visibleDetail: false });
  };

  render() {
    const { currentDetail, visibleDetail } = this.state;

    return (
      <div className="sms-channel-area">
        <div className="box-header">短信通道设置</div>
        <div className="box">
          <div className="box-in">
            <p>设置短信网关后，用户可以发送呼前短信、挂机短信和通话中短信。</p>
            <p className="grey list-span">
              {currentDetail.smsGatewayId ? (
                <span>短信网关：{currentDetail.smsGatewayName}</span>
              ) : (
                <span>未设置短信网关</span>
              )}
            </p>
          </div>
          <div style={{ textAlign: 'center', width: 150 }}>
            <Button type="link" block onClick={this.openDetail} style={{ marginTop: 6 }}>
              设置
            </Button>
          </div>
        </div>
        <DetailModal
          visible={visibleDetail}
          currentDetail={currentDetail}
          successFn={() => {
            this.closeDetail();
            this.fetchData();
          }}
          cancelFn={() => {
            this.closeDetail();
          }}
        />
      </div>
    );
  }
}
